<template>
  <div class="carbon-platform">
    <!-- 加载动画 -->
    <div class="preloader-wrapper" v-if="isLoading">
      <div class="preloader"></div>
    </div>

    <!-- 导航栏 - 保持不变 -->
    <nav class="navbar sticky-top bg-white shadow-sm py-3">
      <div class="container">
        <div class="d-flex justify-content-between align-items-center w-100">
          <!-- 网站标志 -->
          <div class="navbar-logo">
            <span class="logo-icon">🌱</span>
            <span class="logo-text">绿碳平台</span>
          </div>

          <!-- 中间导航链接 - 桌面版 -->
          <ul class="navbar-nav list-unstyled d-flex flex-row gap-3 gap-lg-5 justify-content-center flex-wrap align-items-center mb-0 fw-bold flex-grow-1 mx-4">
            <li class="nav-item">
              <a href="/index" class="nav-link text-dark hover:text-primary transition-colors">首页</a>
            </li>
            <li class="nav-item">
              <a href="/shop" class="nav-link text-dark hover:text-primary transition-colors">碳积分市场</a>
            </li>
            <li class="nav-item">
              <a href="/blog" class="nav-link text-dark hover:text-primary transition-colors">博客</a>
            </li>
            <li class="nav-item">
              <a href="/contact" class="nav-link text-dark hover:text-primary transition-colors">联系我们</a>
            </li>
            <li class="nav-item">
              <a href="/about" class="nav-link text-dark hover:text-primary transition-colors">关于我们</a>
            </li>
            <li class="nav-item">
              <a href="/order" class="nav-link text-dark hover:text-primary transition-colors">我的订单</a>
            </li>
          </ul>

          <!-- 右侧功能区 -->
          <div class="d-flex align-items-center gap-4 gap-lg-5">
            <!-- 搜索按钮 -->
            <button class="btn p-2 text-dark hover:text-primary transition-colors" aria-label="搜索">
              <span class="fs-5">🔍</span>
            </button>

            <!-- 购物车 -->
            <a href="/cart" class="btn p-2 text-dark hover:text-primary transition-colors position-relative" aria-label="购物车">
              <span class="fs-5">🛒</span>
            </a>

            <!-- 用户菜单 -->
            <div class="dropdown">
              <button class="btn p-2 text-dark hover:text-primary transition-colors" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="用户菜单">
                <span class="fs-5">👤</span>
              </button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="/login">登录</a></li>
                <li><a class="dropdown-item" href="/register">注册</a></li>
                <li><a class="dropdown-item" href="/account">企业账户</a></li>
              </ul>
            </div>

            <!-- 移动端菜单按钮 -->
            <button class="btn d-lg-none p-2 text-dark" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileMenu" aria-label="菜单">
              <span class="fs-5">☰</span>
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主内容区域 -->
    <main class="account-page py-5 bg-gray-50">
      <div class="container-lg">
        <div class="account-info">
          <!-- 左右布局容器 -->
          <div class="row equal-height-container">
            <!-- 左侧区域：合并企业信息 + 碳积分管理 -->
            <div class="col-lg-4 left-column">
              <div class="card profile-card shadow-sm mb-4">
                <div class="card-header bg-white border-bottom-0 pb-2">
                  <h4 class="card-title mb-0">企业基本信息</h4>
                </div>
                <div class="card-body pt-3">
                  <div class="text-center mb-4">
                    <img src="https://picsum.photos/id/1025/120/120" alt="企业封面" class="rounded-circle w-24 h-24 object-cover border-4 border-white shadow-sm mx-auto">
                    <h5 class="mt-3 font-semibold">绿色科技企业有限公司</h5>
                    <p class="text-sm text-gray-500">新能源 · 环保技术 · 碳排放管理</p>
                  </div>

                  <div class="profile-details">
                    <div class="mb-3">
                      <div class="d-flex justify-content-between text-sm">
                        <span class="text-gray-500">企业ID：</span>
                        <span>ENT-2023-05872</span>
                      </div>
                    </div>
                    <div class="mb-3">
                      <div class="d-flex justify-content-between text-sm">
                        <span class="text-gray-500">成立时间：</span>
                        <span>2018年06月15日</span>
                      </div>
                    </div>
                  </div>
                  <div class="d-grid gap-2 mt-1">
                    <button class="btn btn-outline-primary btn-sm" @click="showEditModal('basicInfo')">
                      <i class="fa fa-pencil me-1"></i> 修改基本信息
                    </button>
                  </div>

                  <!-- 碳积分管理部分 - 合并到企业信息卡片中 -->
                  <div class="mt-5 pt-4 border-top">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                      <h5 class="font-semibold mb-0">碳积分管理</h5>
                      <button class="btn btn-sm btn-primary" @click="showEditModal('carbonCredit')">
                        编辑
                      </button>
                    </div>

                    <div class="carbon-credit-info">
                      <!-- 现有积分 -->
                      <div class="text-center mb-4">
                        <div class="text-4xl font-bold text-green-600 mb-1">12,580</div>
                        <div class="text-sm text-gray-500">现有积分</div>
                      </div>

                      <!-- 目标积分 -->
                      <div class="mb-4">
                        <div class="d-flex justify-content-between text-sm mb-1">
                          <span class="text-gray-500">年度目标积分：</span>
                          <span>20,000 积分</span>
                        </div>
                        <div class="progress" style="height: 8px;">
                          <div class="progress-bar bg-green-500" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <div class="text-end text-xs text-gray-500 mt-1">完成率 65%</div>
                      </div>

                      <div class="d-grid gap-2 mt-2">
                        <!-- 碳积分交易按钮跳转至shop.vue -->
                        <a href="/shop" class="btn btn-success btn-sm">
                          <i class="fa fa-exchange me-1"></i> 碳积分交易
                        </a>
                        <!-- 交易记录按钮跳转至Order.vue -->
                        <a href="/Order" class="btn btn-outline-success btn-sm">
                          <i class="fa fa-history me-1"></i> 交易记录查询
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 右侧区域：企业认证信息（丰富文字内容） -->
            <div class="col-lg-8 right-column">
              <div class="card certification-card shadow-sm h-100">
                <div class="card-header bg-white border-bottom-0 pb-2">
                  <h4 class="card-title mb-0">企业认证信息</h4>
                </div>
                <div class="card-body pt-3">
                  <div class="certification-status mb-5">
                    <div class="d-flex align-items-center gap-3">
                      <div class="certification-badge bg-blue-100 text-blue-700 p-2 rounded-full">
                        <i class="fa fa-check-circle text-xl"></i>
                      </div>
                      <div>
                        <h5 class="font-medium">企业认证状态：已认证</h5>
                        <p class="text-sm text-gray-500">认证有效期至：2024年08月25日 | 认证等级：A级</p>
                      </div>
                      <button class="ms-auto btn btn-sm btn-outline-primary" @click="showEditModal('certification')">
                        更新认证信息
                      </button>
                    </div>
                  </div>

                  <div class="certification-form">
                    <!-- 企业资质信息 -->
                    <div class="mb-5">
                      <h5 class="mb-3 text-base font-semibold">企业资质信息</h5>
                      <div class="row mb-3">
                        <div class="col-md-6">
                          <label class="form-label text-sm font-medium">统一社会信用代码</label>
                          <div class="form-control-plaintext border rounded p-2 bg-white">91310000MA1FL6XXXX</div>
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-sm font-medium">营业执照编号</label>
                          <div class="form-control-plaintext border rounded p-2 bg-white">沪市监注字[2018]第0123456号</div>
                        </div>
                      </div>
                      <div class="row mb-3">
                        <div class="col-md-6">
                          <label class="form-label text-sm font-medium">营业执照状态</label>
                          <div class="form-control-plaintext border rounded p-2 bg-white">正常存续（在营、开业、在册）</div>
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-sm font-medium">营业执照有效期</label>
                          <div class="form-control-plaintext border rounded p-2 bg-white">长期有效（2018年06月15日起）</div>
                        </div>
                      </div>
                      <div class="row mb-3">
                        <div class="col-md-6">
                          <label class="form-label text-sm font-medium">注册资本</label>
                          <div class="form-control-plaintext border rounded p-2 bg-white">人民币 5,000万元</div>
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-sm font-medium">经营范围</label>
                          <div class="form-control-plaintext border rounded p-2 bg-white">环保设备研发与销售、碳排放管理咨询服务</div>
                        </div>
                      </div>
                    </div>

                    <!-- 法人信息 -->
                    <div class="mb-5">
<!--                      <h5 class="mb-3 text-base font-semibold">法人信息</h5>-->
                      <div class="row mb-3">
                        <div class="col-md-6">
                          <label class="form-label text-sm font-medium">法人姓名</label>
                          <div class="form-control-plaintext border rounded p-2 bg-white">张明华</div>
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-sm font-medium">联系电话</label>
                          <div class="form-control-plaintext border rounded p-2 bg-white">13912345678</div>
                        </div>
                      </div>
                      <div class="row mb-3">
                        <div class="col-md-6">
                          <label class="form-label text-sm font-medium">电子邮箱</label>
                          <div class="form-control-plaintext border rounded p-2 bg-white">zhangminghua@greentech.com</div>
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-sm font-medium">任职状态</label>
                          <div class="form-control-plaintext border rounded p-2 bg-white">正常任职（董事长兼总经理）</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 修改信息模态框 -->
    <div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" v-if="currentModal === 'basicInfo'">修改企业基本信息</h5>
            <h5 class="modal-title" v-if="currentModal === 'password'">修改密码</h5>
            <h5 class="modal-title" v-if="currentModal === 'carbonCredit'">编辑碳积分信息</h5>
            <h5 class="modal-title" v-if="currentModal === 'certification'">更新认证信息</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <!-- 模态框内容根据currentModal动态显示 -->
            <div v-if="currentModal === 'basicInfo'">
              <!-- 企业基本信息表单 -->
              <div class="row mb-3">
                <div class="col-md-6">
                  <label class="form-label">企业名称</label>
                  <input type="text" class="form-control" value="绿色科技企业有限公司">
                </div>
                <div class="col-md-6">
                  <label class="form-label">所属行业</label>
                  <select class="form-select">
                    <option selected>新能源技术开发</option>
                    <option>节能环保</option>
                    <option>智能制造</option>
                    <option>其他</option>
                  </select>
                </div>
              </div>
              <div class="row mb-3">
                <div class="col-md-6">
                  <label class="form-label">企业规模</label>
                  <select class="form-select">
                    <option>100人以下</option>
                    <option selected>200-500人</option>
                    <option>500-1000人</option>
                    <option>1000人以上</option>
                  </select>
                </div>
                <div class="col-md-6">
                  <label class="form-label">联系电话</label>
                  <input type="tel" class="form-control" value="021-5876XXXX">
                </div>
              </div>
              <div class="mb-3">
                <label class="form-label">电子邮箱</label>
                <input type="email" class="form-control" value="contact@greentech.com">
              </div>
              <div class="mb-3">
                <label class="form-label">企业地址</label>
                <input type="text" class="form-control" value="上海市浦东新区环保科技园A座15层">
              </div>
            </div>

            <div v-if="currentModal === 'password'">
              <!-- 修改密码表单 -->
              <div class="mb-3">
                <label class="form-label">原密码</label>
                <input type="password" class="form-control">
              </div>
              <div class="mb-3">
                <label class="form-label">新密码</label>
                <input type="password" class="form-control">
              </div>
              <div class="mb-3">
                <label class="form-label">确认新密码</label>
                <input type="password" class="form-control">
              </div>
              <div class="text-sm text-gray-500">
                密码长度应不少于8位，包含大小写字母、数字和特殊符号
              </div>
            </div>

            <div v-if="currentModal === 'carbonCredit'">
              <!-- 碳积分编辑表单 -->
              <div class="mb-3">
                <label class="form-label">年度目标积分</label>
                <div class="input-group">
                  <input type="number" class="form-control" value="20000">
                  <span class="input-group-text">积分</span>
                </div>
              </div>
              <div class="mb-3">
                <label class="form-label">积分有效期至</label>
                <input type="date" class="form-control" value="2024-12-31">
              </div>
              <div class="mb-3">
                <label class="form-label">碳积分说明</label>
                <textarea class="form-control" rows="3">本企业碳积分主要来源于节能减排项目和绿色能源使用，可用于抵消碳排放或参与碳交易市场交易。</textarea>
              </div>
            </div>

            <div v-if="currentModal === 'certification'">
              <!-- 认证信息更新表单 -->
              <div class="row mb-3">
                <div class="col-md-6">
                  <label class="form-label">统一社会信用代码</label>
                  <input type="text" class="form-control" value="91310000MA1FL6XXXX">
                </div>
                <div class="col-md-6">
                  <label class="form-label">营业执照编号</label>
                  <input type="text" class="form-control" value="沪市监注字[2018]第0123456号">
                </div>
              </div>

              <div class="row mb-3">
                <div class="col-md-6">
                  <label class="form-label">法人姓名</label>
                  <input type="text" class="form-control" value="张明华">
                </div>
                <div class="col-md-6">
                  <label class="form-label">法人联系电话</label>
                  <input type="text" class="form-control" value="13912345678">
                </div>
              </div>

              <div class="mb-3">
                <label class="form-label">最新碳排放报告周期</label>
                <input type="text" class="form-control" value="2022年度碳排放报告">
              </div>

              <div class="mb-3">
                <label class="form-label">年度碳排放量</label>
                <input type="text" class="form-control" value="2,560吨二氧化碳当量">
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">保存修改</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 - 固定在页面底部 -->
    <footer class="main-footer mt-auto">
      <div class="container">
        <div class="footer-bottom">
          <p class="copyright">© 2025 绿碳平台 版权所有 | 京ICP备12345678号</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentModal: '',
      isLoading: false
    }
  },
  methods: {
    showEditModal(type) {
      this.currentModal = type;
      // 显示模态框
      const modal = new bootstrap.Modal(document.getElementById('editModal'));
      modal.show();
    }
  },
  mounted() {
    // 初始化操作
  }
}
</script>

<style>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  background-color: #f9fafb;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: inherit;
}

/* 导航栏样式 */
.navbar {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1030;
}

.navbar-brand {
  font-size: 1.5rem;
  font-weight: 600;
}

.dropdown-menu {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: none;
  padding: 0.5rem 0;
}

.dropdown-item {
  padding: 0.6rem 1.2rem;
  transition: background-color 0.2s ease;
}

.dropdown-item:hover {
  background-color: #f1f5f9;
  color: #22c55e;
}

/* 主内容区域样式 */
.account-page {
  padding: 2rem 0;
  min-height: calc(100vh - 180px);
}

/* 左右等高布局关键样式 */
.equal-height-container {
  display: flex;
  flex-wrap: wrap;
}

.left-column, .right-column {
  display: flex;
  flex-direction: column;
}

/* 卡片通用样式 */
.card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  border: none;
  background-color: #fff;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
  background-color: #fff;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
}

.card-body {
  padding: 1.25rem;
}

/* 左侧区域布局 */
.profile-card {
  flex-shrink: 0;
}

/* 企业信息样式 */
.profile-details {
  padding: 0.5rem 0;
}

.profile-details .mb-3 {
  padding: 0.3rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.profile-details .mb-3:last-child {
  border-bottom: none;
}

/* 碳积分管理样式 */
.carbon-credit-info .text-4xl {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.progress {
  border-radius: 4px;
  background-color: #e2e8f0;
  height: 8px;
  overflow: hidden;
}

.progress-bar {
  background-color: #22c55e;
  transition: width 0.6s ease;
}

/* 右侧认证卡片样式 */
.certification-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.certification-card .card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.certification-form {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* 调大认证信息区域字体 */
.certification-form {
  font-size: 1rem;
}

.certification-form .form-label {
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.certification-form .form-control-plaintext {
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
  line-height: 1.6;
}

.certification-status {
  padding: 1rem;
  background-color: #f8fafc;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.certification-status h5 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.certification-status p {
  font-size: 0.95rem;
}

.certification-badge {
  background-color: #dbeafe;
  color: #1e40af;
}

/* 认证信息区块标题 */
.certification-form h5 {
  font-size: 1.05rem;
  color: #1e293b;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
}

/* 历史记录样式 */
.history-item {
  transition: background-color 0.2s ease;
  padding: 0.75rem 0;
}

.history-item:hover {
  background-color: #f8fafc;
}

.history-item.border-b {
  border-bottom: 1px solid #e2e8f0;
}

.history-item .font-medium {
  font-size: 0.95rem;
}

/* 按钮样式 */
.btn {
  border-radius: 6px;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  transition: all 0.2s ease;
}

.btn-primary {
  background-color: #2563eb;
  border-color: #2563eb;
}

.btn-primary:hover {
  background-color: #1d4ed8;
  border-color: #1d4ed8;
}

.btn-success {
  background-color: #10b981;
  border-color: #10b981;
}

.btn-success:hover {
  background-color: #059669;
  border-color: #059669;
}

.btn-outline-primary {
  color: #2563eb;
  border-color: #2563eb;
}

.btn-outline-primary:hover {
  background-color: #2563eb;
  color: #fff;
}

.btn-outline-secondary {
  color: #64748b;
  border-color: #64748b;
}

.btn-outline-secondary:hover {
  background-color: #64748b;
  color: #fff;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* 表单样式 */
.form-control {
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  padding: 0.375rem 0.75rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
  outline: none;
}

.form-control-plaintext {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

/* 页脚样式 */
footer {
  background-color: #1e293b;
  color: #f8fafc;
  padding: 3rem 0 2rem;
}

footer h5 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #fff;
}

footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer li {
  margin-bottom: 0.75rem;
}

footer a {
  color: #94a3b8;
  transition: color 0.2s ease;
}

footer a:hover {
  color: #22c55e;
}

footer .border-t {
  border-top: 1px solid #334155;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .container-lg {
    padding: 0 1.5rem;
  }
}

@media (max-width: 992px) {
  .equal-height-container {
    flex-direction: column;
  }

  .right-column {
    margin-top: 1rem;
  }

  .navbar .d-flex.gap-4 {
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  footer .row {
    flex-direction: column;
  }

  footer .col-md-4,
  footer .col-md-2,
  footer .col-md-3 {
    width: 100%;
    margin-bottom: 2rem;
  }

  .modal-dialog.modal-lg {
    margin: 1rem;
  }
}

@media (max-width: 576px) {
  .navbar .d-flex.align-items-center.gap-4 {
    display: none;
  }

  .card-header, .card-body {
    padding: 1rem;
  }

  .certification-status {
    flex-direction: column;
    align-items: flex-start;
  }

  .certification-status .ms-auto {
    margin-top: 1rem;
    width: 100%;
  }
}
</style>
